<template>
  <div>
    <div class="biaoti">
      <span><img src="../../static/列表页/home.png" alt="" /></span>
      <span>
        <img src="../../static/列表页/Breadcrumb-separator.png" alt="" />
      </span>
      <span>课程管理</span>
      <span>
        <img src="../../static/列表页/Breadcrumb-separator.png" alt="" />
      </span>
      <span>选课信息</span>
    </div>
    <div class="user_secion">
      <div class="user_s_setuid flex_x">
        <div class="user_s_input">
          <div class="user_input_style flex_x">
            <div>学校名字</div>
            <div><el-input placeholder="请输入学校名字" /></div>
          </div>

          <div class="user_input_style flex_x">
            <div>学校名字</div>
            <div><el-input placeholder="请输入学校名字" /></div>
          </div>
          <div class="user_input_style flex_x">
            <div>学校名字</div>
            <div>
              <el-select placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </div>
          </div>
          <div class="user_input_style flex_x">
            <div>性别</div>
            <div>
              <el-select placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </div>
          </div>
          <div class="user_input_style flex_x">
            <div>班级</div>
            <div>
              <el-select placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="user_s_btn">
          <div>
            <el-button class="user_s_btn_style" type="primary" round
              >Primary</el-button
            >
          </div>
          <div>
            <el-button class="user_s_btn_style" type="primary" round
              >Primary</el-button
            >
          </div>
        </div>
      </div>

      <div>
        <div class="flex_x user_s_listbtn">
          <el-button class="btn1" type="primary">Primary</el-button>
          <el-button class="btn2" type="primary">Primary</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            v-for="item in cloums"
            :key="item"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template #default="scoped">
              <div v-if="item.operation">
                <span :style="{ color: 'red' }">
                  {{ scoped.row[item.prop] }}
                </span>
              </div>
            </template></el-table-column
          >
        </el-table>

        <div class="demo-pagination-block pagination_style">
          <el-pagination
            :page-size="100"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next"
            :total="1000"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import tablelist from '../../static/userlist/tablelist'
import selectlist from '../../static/userlist/selectList'
export default {
  components: { Check, Delete, Edit, Message, Search, Star },
  props: {},
  data() {
    let { options1, options2, options3 } = selectlist
    let { tableData, cloums } = tablelist
    return {
      options1,
      options2,
      options3,
      tableData,
      cloums,
    }
  },
  watch: {},
  computed: {},
  methods: {},
  created() {
    console.log(this.options1)
    console.log(this.tableData)
  },
  mounted() {},
}
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}

.flex_x {
  display: flex;
  flex-wrap: wrap;

  justify-content: space-between;
}
.flex_y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex_around {
  justify-content: space-around;
}
.biaoti {
  width: 180px;
  height: 22px;
  opacity: 1;
  color: rgba(29, 33, 41, 1);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  line-height: 22px;
  margin: 16px;
}

.login_img {
  width: 131px;
  height: 26px;
  margin: 16px;
  opacity: 1;
}
.bg_wh {
  width: 1920px;
  height: 1141.33px;
  background: rgb(255, 227, 227);
}
.user_secion {
  width: 1600px;
  height: 720px;
  margin: 20px;
  background: white;
}

.user_s_setuid {
}
.user_s_input {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  text-align: center;
  grid-row-gap: 1em;
  margin: 10px;

  .user_input_style {
    align-items: center;

    margin-top: 20px;

    div:nth-child(2) {
      width: 300px;
    }
    .el-select {
      width: 300px;
    }
  }
}
.user_s_btn {
  width: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-right: 22px;
  & .user_s_btn_style {
    width: 100px;
    margin: 12px;
  }
}
.input_style {
  width: 300px;
}

.user_s_listbtn {
  margin-top: 22px;
  margin-bottom: 22px;
  & .btn1 {
    width: 100px;
    margin-left: 16px;
  }
  & .btn2 {
    width: 100px;
    margin-right: 36px;
  }
}
.pagination_style {
  margin: 20px;
  // display: flex;
  // justify-content: space-between;
  margin-left: 65%;
}
</style>
